<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-100 box">
    <!-- 顶部Logo -->
    <div class="w-full bg-white py-4 text-center mb-5">
      <img
        :src="log"
        alt="GOPATH Diagnostics"
        class="mx-auto w-48"
      />
    </div>
    <!-- 主卡片容器 -->
    <div class="bg-white rounded-xl shadow-lg p-6  mx-auto w-95/100">
      <div class="">
        <span class="text-3xl font-bold mb-2">Hello!</span>
         <span class="text-3xl  mb-6">Let's get started on completing your purchase.</span>
         <!-- <span class="text-3xl  mb-6">Let’s get started on completing your purchase.</span> -->
      </div>

      <p class="text-gray-700  mb-6 mt-6 text-lg">
        To begin, please select one of the two options below.
      </p>
      <h2 class="text-xl font-bold mb-4 text-2xl">How would you like to pay for your purchase?</h2>
      <!-- 支付选项 -->
      <div class="space-y-3 mb-6">
        <div
          class="p-4 rounded-lg cursor-pointer transition-all duration-200"
          :class="{
            'bg-[#747474] text-white': selectedOption === 'insurance',
            'bg-gray-100': selectedOption !== 'insurance',
          }"
          @click="selectedOption = 'insurance'"
        >
          <div class="flex items-center">
            <div
              class="w-5 h-5 rounded-full bg-[#ffffff] mr-3 flex items-center justify-center text-sm"
              :class="{
                'border-white bg-white': selectedOption === 'insurance',
                'border-gray-400': selectedOption !== 'insurance',
              }"
            >
              <el-icon
                v-if="selectedOption === 'insurance'"
                class="text-gray-600"
                ><Check
              /></el-icon>
            </div>
            <span class="">I want to use my insurance.</span>
          </div>
        </div>
        <div
          class="p-4 rounded-lg cursor-pointer transition-all duration-200"
          :class="{
            'bg-[#747474] text-white': selectedOption === 'self-pay',
            'bg-gray-100': selectedOption !== 'self-pay',
          }"
          @click="selectedOption = 'self-pay'"
        >
          <div class="flex items-center">
            <div
              class="w-5 h-5 rounded-full bg-[#ffffff] mr-3 flex items-center justify-center"
              :class="{
                'border-white bg-white': selectedOption === 'self-pay',
                'border-gray-400': selectedOption !== 'self-pay',
              }"
            >
              <el-icon
                v-if="selectedOption === 'self-pay'"
                class="text-gray-600"
                ><Check
              /></el-icon>
            </div>
            <span class="">I want to self-pay.</span>
          </div>
        </div>
      </div>
      <!-- 提示信息 -->
      <span class=" text-[#555555]  mb-6 opacity-55">
        Note: Only some insurances are able to be accepted. By choosing self-pay, you agree to pay the full price of the items in your cart by cash or credit card.
      </span>
      <!-- 提交按钮 -->
      <div class="flex justify-center mt-8">
        <button
          @click="handleSubmit"
          class="w-[168px] h-[60px] bg-[#B42026] text-white py-3 !rounded-button hover:bg-red-700 transition-colors duration-200 rounded-[30px]"
        >
          Submit
      </button>
      </div>

      <!-- 底部Logo -->
      <div class="mt-8 text-center">
        <img
          :src="log"
          alt="GOPATH Diagnostics"
          class="mx-auto w-36"
        />
      </div>
    </div>
    <div>
      <img src="" alt="">
    </div>
  </div>
</template>
  <script lang="ts" setup>
import { ref } from "vue";
import { Check } from "@element-plus/icons-vue";
import log from '@/assets/img/gopathLogo.png'

const selectedOption = ref("insurance");
const handleSubmit = () => {
  console.log("Selected payment option:", selectedOption.value);
  if(selectedOption.value === 'insurance'){

  }else if(selectedOption.value === 'self-pay'){

  }
};


</script>
  <style scoped lang="less">
  .box {
    font-family: Plus Jakarta Sans;
  }
.bg-gray-100 {
  background-color: #f3f4f6;
}
.bg-gray-600 {
  background-color: #4b5563 !important;
}
button:focus {
  outline: none;
}
input[type="radio"] {
  display: none;
}
.text-gray-600 {
  color: #6F6F6F;
}
</style>
  